<template>
  <div ref="pieCharts" style="width: 538px; height: 300px"></div>
</template>

<script>
// 引入可视化插件
import echarts from "echarts";
import { mapGetters } from "vuex";
export default {
  name: "PieCharts",
  props: ["activeName"],
  data() {
    return {
      dataList: [
      { value: 1048, name: "家用电器" },
      { value: 735, name: "食用酒水" },
      { value: 580, name: "个护健康" },
      { value: 484, name: "服饰箱包" },
      { value: 300, name: "母婴产品" },
      { value: 200, name: "其他" },
    ]
    }
  },
  computed: {
    ...mapGetters("home", ["saleRank"]),
    online() {
      return this.saleRank.online || [];
    },
    shop() {
      return this.saleRank.shop || [];
    },
  },
  watch: {
    activeName() {
      if (this.activeName === "online") {
        this.initPieCharts(this.online);
      } else if (this.activeName === "store") {
        this.initPieCharts(this.shop);
      } else {
        this.initPieCharts(this.dataList)
      }
    },
  },
  methods: {
    initPieCharts(dataList) {
      // 选择容器，初始化
      this.myEcharts = echarts.init(this.$refs.pieCharts);
      this.myEcharts.setOption({
        title: {
          text: "name",
          subtext: "value",
          left: "center",
          top: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter(param) {
                return param.name + " (" + param.percent * 2 + "%)";
              },
            },
            labelLine: {
              show: false,
            },
            data: dataList,
            labelLine: {
              //牵引线条
              normal: {
                show: true,
                length2: 10,
                lineStyle: {
                  color: "#ddd",
                },
              },
            },
          },
        ],
      });
      this.myEcharts.on("mouseover", (params) => {
        const { name, value } = params.data;
        this.myEcharts.setOption({
          title: {
            text: name,
            subtext: value,
            left: "center",
            top: "center",
          },
        });
      });
    },
  },
  mounted() {
    // 页面挂载完毕，初始化饼图
    this.initPieCharts(this.dataList);
  },
};
</script>

<style>
</style>